<template>
  <div id="FormPlus" v-if="useSearchForm">
    <el-form
      ref="ruleForm"
      :rules="rules"
      :inline="inline"
      :model="ruleForm"
      class="ruleForm"
      :label-width="labelWidth"
      :style="formStyle"
      :size="size"
    >
      <template v-for="(item, index) in schemas">
        <template v-if="!item.type || item.type === 'input'">
          <el-form-item
            :key="index"
            :label="item.label"
            :prop="item.field"
            :required="item.required"
          >
            <el-input
              v-model.trim="ruleForm[item.field]"
              :clearable="item.clearable === undefined || item.clearable"
              filterable
              :placeholder="item.placeholder || `请输入${item.label}`"
              v-bind="item.componentProps"
            />
          </el-form-item>
        </template>
        <template v-if="item.type === 'select'">
          <el-form-item
            :key="index"
            :label="item.label"
            :prop="item.field"
            :required="item.required"
          >
            <el-select
              :style="`width: ${formItemContentWidth}`"
              v-model.trim="ruleForm[item.field]"
              :clearable="item.clearable === undefined || item.clearable"
              filterable
              :placeholder="item.placeholder || `请选择${item.label}`"
              v-bind="item.componentProps"
            >
              <el-option
                v-for="(i, key) in item.options"
                :key="i[item.optionsKey] || key"
                :label="i[item.optionsLabel] || i.label"
                :value="i[item.optionsValue] || i.value"
                :width="formItemContentWidth"
                v-bind="item.componentProps"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-if="item.type === 'date-picker'">
          <el-form-item
            :key="index"
            :prop="item.field"
            :label="item.label"
            :required="item.required"
          >
            <el-date-picker
              v-model.trim="ruleForm[item.field]"
              :clearable="item.clearable === undefined || item.clearable"
              :placeholder="item.placeholder || `请选择${item.label}`"
              :format="item.format"
              :picker-options="item.pickerOptions"
              v-bind="item.componentProps"
            />
          </el-form-item>
        </template>
      </template>
      <el-form-item class="btn-box">
        <el-col class="btn-container">
          <el-button
            class="el-icon-search"
            type="primary"
            :size="size"
            @click="submitForm"
            >{{ submitBtnText }}</el-button
          >
          <el-button class="el-icon-refresh" :size="size" @click="resetForm">{{
            resetBtnText
          }}</el-button>
        </el-col>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    // 搜索项
    schemas: {
      type: Array,
      default: () => [],
    },
    // 是否显示搜索
    useSearchForm: {
      type: Boolean,
      default: true,
    },
    submitBtnText: {
      type: String,
      default: "查询",
    },
    resetBtnText: {
      type: String,
      default: "重置",
    },
    size: {
      type: String,
      default: "small",
    },
    inline: {
      type: Boolean,
      default: true,
    },
    labelWidth: {
      type: String,
      default: "100px",
    },
    formItemWidth: {
      type: String,
      default: "400px",
    },
    formItemContentWidth: {
      type: String,
      default: "250px",
    },
    rules: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      ruleForm: {},
    };
  },
  computed: {
    formStyle() {
      return {
        "--formItemWidth": this.formItemWidth,
        "--formItemContentWidth": this.formItemContentWidth,
      };
    },
  },
  watch: {
    schemas: {
      handler(schemas) {
        this.handleList(schemas);
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    // 所填写数据
    submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          // 判断是否有日期格式组件
          let index = this.schemas.findIndex(
            (item) => item.type == "date-picker"
          );
          let data = this.schemas[index];
          if (
            index != -1 &&
            ["datetimerange", "daterange", "monthrange"].includes(
              data.componentProps.type
            )
          ) {
            let timeField = data.componentProps.fieldMapToTime[0];
            if (this.ruleForm[data.field]) {
              this.$set(
                this.ruleForm,
                timeField[0],
                this.ruleForm[data.field][0]
              );
              this.$set(
                this.ruleForm,
                timeField[1],
                this.ruleForm[data.field][1]
              );
            } else {
              this.$set(this.ruleForm, timeField[0], "");
              this.$set(this.ruleForm, timeField[1], "");
            }
          }
          const exportData = { ...this.ruleForm };
          this.$emit("submitForm", exportData);
        } else {
          return false;
        }
      });
    },
    // 默认清空所填写数据
    resetForm() {
      this.$refs.ruleForm.resetFields();
      this.handleList(this.schemas);
      this.$emit("resetForm", { ...this.ruleForm });
    },
    handleList(schemas) {
      for (let i = 0; i < schemas.length; i++) {
        const formitem = schemas[i];
        const { field, defaultValue } = formitem;
        this.$set(this.ruleForm, field, defaultValue || "");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#FormPlus {
  margin: 10px 0;
  padding: 15px 10px 0;
  background: #fff;
  .ruleForm {
    width: 100%;
    ::v-deep.el-form-item {
      // width: var(--formItemWidth);
    }
    ::v-deep.el-form-item__content {
      width: var(--formItemContentWidth);
    }
    ::v-deep.el-form-item__content .el-date-editor,
    .el-input {
      width: var(--formItemContentWidth);
    }
  }
  .btn-box {
    float: right;
  }
  .btn-container {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
